<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端高级学习笔记 | ゆらぎ荘の幽奈さん</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="./img/d.png">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <meta name="description" content="一边学习一边整理">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    <link rel="preload" href="/xzzdyn/assets/css/0.styles.a9296e3c.css" as="style"><link rel="preload" href="/xzzdyn/assets/js/app.4db0d55d.js" as="script"><link rel="preload" href="/xzzdyn/assets/js/2.dda3ed2b.js" as="script"><link rel="preload" href="/xzzdyn/assets/js/3.fbc0c9b3.js" as="script"><link rel="preload" href="/xzzdyn/assets/js/15.1cf391a4.js" as="script"><link rel="prefetch" href="/xzzdyn/assets/js/10.1ced013c.js"><link rel="prefetch" href="/xzzdyn/assets/js/11.bb095366.js"><link rel="prefetch" href="/xzzdyn/assets/js/12.b4c909e6.js"><link rel="prefetch" href="/xzzdyn/assets/js/13.2a83d3ce.js"><link rel="prefetch" href="/xzzdyn/assets/js/14.8d02da9b.js"><link rel="prefetch" href="/xzzdyn/assets/js/16.98e60449.js"><link rel="prefetch" href="/xzzdyn/assets/js/17.8bb1ba2b.js"><link rel="prefetch" href="/xzzdyn/assets/js/18.88fd64ce.js"><link rel="prefetch" href="/xzzdyn/assets/js/19.4c6518bd.js"><link rel="prefetch" href="/xzzdyn/assets/js/20.090cff51.js"><link rel="prefetch" href="/xzzdyn/assets/js/21.1f3e70ff.js"><link rel="prefetch" href="/xzzdyn/assets/js/4.ee6b4283.js"><link rel="prefetch" href="/xzzdyn/assets/js/5.f8936771.js"><link rel="prefetch" href="/xzzdyn/assets/js/6.b694a866.js"><link rel="prefetch" href="/xzzdyn/assets/js/7.ed6b8f96.js"><link rel="prefetch" href="/xzzdyn/assets/js/8.9baa6a3d.js"><link rel="prefetch" href="/xzzdyn/assets/js/9.9d3db13f.js">
    <link rel="stylesheet" href="/xzzdyn/assets/css/0.styles.a9296e3c.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/xzzdyn/" class="home-link router-link-active"><span class="site-name can-hide">ゆらぎ荘の幽奈さん</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/xzzdyn/" class="nav-link">首页</a></div><div class="nav-item"><a href="/xzzdyn/comment/" class="nav-link">留言板</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="归档" class="dropdown-title"><a href="/xzzdyn/archives/" class="link-title">归档</a> <span class="title" style="display:none;">归档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xzzdyn/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/xzzdyn/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/xzzdyn/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/1059431281/Blog-source/img/custom/avatar.png"> <div class="blogger-info"><h3>雨宿り</h3> <span>ゆらぎ荘の幽奈さん</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/xzzdyn/" class="nav-link">首页</a></div><div class="nav-item"><a href="/xzzdyn/comment/" class="nav-link">留言板</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="归档" class="dropdown-title"><a href="/xzzdyn/archives/" class="link-title">归档</a> <span class="title" style="display:none;">归档</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/xzzdyn/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/xzzdyn/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/xzzdyn/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/xzzdyn/pages/958269/" class="sidebar-link">伪元素清除浮动原理</a></li><li><a href="/xzzdyn/pages/1f6509/" class="sidebar-link">从零开始学画画</a></li><li><a href="/xzzdyn/pages/da0a87/" aria-current="page" class="active sidebar-link">前端高级学习笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#class类" class="sidebar-link">Class类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#构造方法construtor" class="sidebar-link">构造方法construtor()</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#get-set方法" class="sidebar-link">get/set方法</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#express中间件" class="sidebar-link">express中间件</a></li></ul></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#基础知识" class="sidebar-link">基础知识</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#变量" class="sidebar-link">变量</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#混合" class="sidebar-link">混合</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#嵌套" class="sidebar-link">嵌套</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#运算" class="sidebar-link">运算</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#转义" class="sidebar-link">转义</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#函数" class="sidebar-link">函数</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#命名空间和访问符" class="sidebar-link">命名空间和访问符</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#映射" class="sidebar-link">映射</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#作用域" class="sidebar-link">作用域</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#注释" class="sidebar-link">注释</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#导入" class="sidebar-link">导入</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#扩展" class="sidebar-link">扩展</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#安装方法" class="sidebar-link">安装方法</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#组件传递参数" class="sidebar-link">组件传递参数</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#考点" class="sidebar-link"></a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#导航守卫-进阶" class="sidebar-link">导航守卫（进阶）</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#补充知识" class="sidebar-link">补充知识</a></li></ul></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#php" class="sidebar-link">php</a></li><li class="sidebar-sub-header"><a href="/xzzdyn/pages/da0a87/#node" class="sidebar-link">node</a></li></ul></li><li><a href="/xzzdyn/pages/e81c23/" class="sidebar-link">精美图库</a></li><li><a href="/xzzdyn/pages/41b6fc/" class="sidebar-link">书籍库</a></li><li><a href="/xzzdyn/pages/8143cc480faf9a11/" class="sidebar-link">欢迎来到我的个人Blog</a></li></ul> <div class="sidebar-slot sidebar-slot-bottom"><!-- 正方形 -->
      <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-7828333725993554"
          data-ad-slot="3508773082"
          data-ad-format="auto"
          data-full-width-responsive="true"></ins>
      <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
      </script></div></aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-583ea4e9><div class="articleInfo" data-v-583ea4e9><ul class="breadcrumbs" data-v-583ea4e9><li data-v-583ea4e9><a href="/xzzdyn/" title="首页" class="iconfont icon-home router-link-active" data-v-583ea4e9></a></li> <li data-v-583ea4e9><a href="/xzzdyn/categories/?category=%E6%9C%80%E5%88%9D" title="分类" data-v-583ea4e9>最初</a></li> <!----> <!----></ul> <div class="info" data-v-583ea4e9><div title="作者" class="author iconfont icon-touxiang" data-v-583ea4e9><a href="javascript:;" data-v-583ea4e9>雨宿り</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-583ea4e9><a href="javascript:;" data-v-583ea4e9>2020-05-10</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            前端高级学习笔记
          </h1> <div class="page-slot page-slot-top"><!-- 固定100% * 90px可显示，max-height:90px未见显示-->
     <ins class="adsbygoogle"
          style="display:inline-block;width:100%;max-height:90px"
          data-ad-client="ca-pub-7828333725993554"
          data-ad-slot="6625304284"></ins>
      <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
      </script></div> <div class="theme-vdoing-content content__default"><p>在复习的过程中，发觉的一些会不解的点</p> <p>持续更新中.....</p> <h1 id="javascript"><a href="#javascript" class="header-anchor">#</a> Javascript</h1> <h2 id="class类"><a href="#class类" class="header-anchor">#</a> Class类</h2> <h3 id="构造方法construtor"><a href="#构造方法construtor" class="header-anchor">#</a> 构造方法construtor()</h3> <ol><li>在类中的构造方法是唯一的，不允许存在多个</li> <li>constructor是类的默认方法，创建类的实例对象时被调用</li> <li>当没有指定时会自动添加默认的constructor方法</li> <li>在构造方法中，可以使用super关键字调用继承的父类构造方法</li></ol> <h3 id="get-set方法"><a href="#get-set方法" class="header-anchor">#</a> get/set方法</h3> <ol><li>set在类实例化时被调用，get在调用对应类属性的时候被调用</li> <li>getter和setter必须同级出现，但并不要求同时出现</li></ol> <p><strong>补充</strong>：关于set/get和getter/setter的个人理解，set和get实际上是一个属性，你能调用它，但他们本身不具有功能，它们的执行大致是当你调用set/get属性时会再去调用各自对应的隐蔽函数，也就是setter/getter</p> <br>
# Node.js
## 基础知识
### 异步编程
Node.js是单线程的异步编程，若出现异常会作为回调函数的第一个参数返回
## 中间件
1. 中间件是一种功能的封装
2. nodejs中有许多包装好的第三方中间件模块，当需要时需先下载再调用
3. 中间件可以执行任何函代码
4. 程序内自己写的中间件必须有4个函数(err,req,res,next)
5. 中间件在执行后，如果想再继续执行下(另)一个中间件，那么当前中间件不能由响应，并调用next()传给下一个中间件
6. 中间件的第一个参数也可以是路径，忽略时则一一对应全部匹配
<h3 id="express中间件"><a href="#express中间件" class="header-anchor">#</a> express中间件</h3> <ol><li>express.static()函数可以设置静态资源目录，多次调用则多个目录</li> <li>express.static调用后访问时不包括括号内的内容，例：public文件夹下有个img文件夹，调用app.use(express.static('pulibc'))后想访问img文件夹下的内容应当这样http://localhost:8080/img/文件1.jpg</li></ol> <br> <h1 id="less"><a href="#less" class="header-anchor">#</a> Less</h1> <h2 id="基础知识"><a href="#基础知识" class="header-anchor">#</a> 基础知识</h2> <p>Less是css的一种预编译语言（新版还有sass），扩展了css语言，使其能够使用变量、函数等。Less运行在node或浏览器端，能够帮助我们更灵活运用css，但、场景只适合在需要代码更新情况多和代码量大的情况，其余情况不建议使用。
(以下教程采于官方)</p> <h3 id="变量"><a href="#变量" class="header-anchor">#</a> 变量</h3> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@width<span class="token punctuation">:</span></span> 1px<span class="token punctuation">;</span>
    <span class="token atrule">@height<span class="token punctuation">:</span> @width+10px

    #header</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span><span class="token variable">@width</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token variable">@height</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后为css--!&gt;
    #header</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 11px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>简单来讲，就是可以遍你需要的值存入变量（跟js的变量一样）需要时调用它即可，并且这些变量是能直接用来计算，把他们当做普通的变量就行，不过要记住加上@表示是变量</p> <h3 id="混合"><a href="#混合" class="header-anchor">#</a> 混合</h3> <p>混合又可以说是包含，比方说有A和B两个空间，嵌套就是让A包含B或B包含A</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        .<span class="token function">a</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>c
    <span class="token punctuation">}</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><strong style="color:red;">注意在使用混合的时候，要在被包含的‘名’后面加上括号（）</strong></p> <h3 id="嵌套"><a href="#嵌套" class="header-anchor">#</a> 嵌套</h3> <p>嵌套通俗一点来讲就是模仿html实现了层叠功能，具体如下</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token selector">.b</span><span class="token punctuation">{</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">.c</span><span class="token punctuation">{</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
            <span class="token selector">.d</span><span class="token punctuation">{</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.a .b</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.a .c</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.a .c .d</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>还有一种，与伪选择器配用。<span style="color:red;">新知识：&amp;表示当前选择器的父级</span></p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>

        <span class="token selector">&amp;::after</span><span class="token punctuation">{</span>

        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span>1px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.a::after</span><span class="token punctuation">{</span>

    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="规则下的嵌套和冒泡"><a href="#规则下的嵌套和冒泡" class="header-anchor">#</a> @规则下的嵌套和冒泡</h4> <p>@规则下的嵌套，意思其实是说跟上面的选择器采用一样的嵌套方式，但相比之下他多了个冒泡规则
冒泡规则，意思是说@的标识会被放到嵌套的最上层，其他的相对不变</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token atrule">@media<span class="token punctuation">(</span>min-width<span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
            <span class="token atrule">@media<span class="token punctuation">(</span>min-resolution<span class="token punctuation">:</span> 192dpi<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token atrule">@media <span class="token punctuation">(</span>min-width<span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
      <span class="token selector">.a</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token atrule">@media <span class="token punctuation">(</span>min-width<span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span>min-resolution<span class="token punctuation">:</span> 192dpi<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
      <span class="token selector">.a</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>另语：就是每在里面多写一个就算一个层叠，并且不只是层叠的部分，没层叠前的也会被编译出来</p> <h3 id="运算"><a href="#运算" class="header-anchor">#</a> 运算</h3> <p>前面变量时也讲过，less的变量是可以进行计算，不过这计算也是有一定规则的。
规则：运算符+、-、*、/ 这四个可以用来计算，取得结果构以最左侧的单位类型为准。当单位换算无效时，结果会忽略单位(没遇到过，所以不是很清楚)。</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> 5cm <span class="token operator">+</span> 10mm<span class="token punctuation">;</span> <span class="token comment">//10mm=1cm,所以结果为6cm(以最左侧单位为准)</span>
    <span class="token variable">@b<span class="token punctuation">:</span></span> 2<span class="token operator">-</span>3cm<span class="token operator">-</span>5mm<span class="token punctuation">;</span>  <span class="token comment">// 没有单位的，在进行计算时就同与他计算的单位一样，所以这里是2cm-3cm-0.5cm=-1.5cm（如果最左侧没单位，那么就以从左到右第一个有单位的为准）</span>
    <span class="token variable">@c<span class="token punctuation">:</span></span> 2<span class="token operator">+</span>5px<span class="token operator">-</span>3cm<span class="token punctuation">;</span>  <span class="token comment">//同上</span>
    <span class="token variable">@d<span class="token punctuation">:</span></span> 5%<span class="token punctuation">;</span>
    <span class="token variable">@e<span class="token punctuation">:</span></span> <span class="token variable">@d</span><span class="token operator">*</span>2<span class="token punctuation">;</span>   <span class="token comment">//10%</span>
    <span class="token variable">@f<span class="token punctuation">:</span></span> <span class="token variable">@d</span><span class="token operator">+</span><span class="token variable">@e</span><span class="token punctuation">;</span>  <span class="token comment">//15%</span>
    <span class="token selector">.a</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@a</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@b</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.c</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@c</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.d</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@d</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.e</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@e</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.f</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@f</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 6cm<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.b</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token operator">-</span>1.5cm<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.c</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> <span class="token operator">-</span>106.38582677px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.d</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.e</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.f</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 15%<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><p>进行加减法时，操作数会统一转换成左侧第一个的单位，而进行乘除法时操作数是不会进行转换的（会直接基数相乘除后结果补上做左侧单位），原因是乘除法大多情况是没有意义的，结果得到的是区域，而css不支持指定区域</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> 2cm <span class="token operator">*</span> 3mm<span class="token punctuation">;</span>  <span class="token comment">//得到的是6cm，而非3cm</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>同样的，也可以对颜色进行计算（像是#224488/2得到的就是#112244)。
不仅如此，less有针对颜色的色彩函数，这里就不一一列出。</p> <h4 id="calc-特例"><a href="#calc-特例" class="header-anchor">#</a> calc()特例</h4> <p>calc函数是为了与css兼容，不对里面的内容进行计算。但、针对嵌套函数内变量的内容则会进行计算</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> 50vh<span class="token operator">/</span>2<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50vh<span class="token operator">+</span><span class="token variable">@a</span><span class="token punctuation">)</span>    <span class="token comment">//这里会对@a里面进行计算，但不对之外的整个内容进行计算，所以得到的是calc(50vh+25vh)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>css自带的calc，写在里面的其实就相当于less的变量运算，意思是一样的，不过是多套一层</p> <h3 id="转义"><a href="#转义" class="header-anchor">#</a> 转义</h3> <p>在less3.5以前，我们可以使用任意字符串作为变量的属性或值（也就是任意字符串都原样输出的意思）。
在less3.5以后，这个转移其实没必要单独列出了，效果跟3.5前一样，但不需要再来~“”或~''引号来转义是字符串。就是说，变量后面能给任意字符，且不用加引号</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span>768px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
        <span class="token atrule">@media @a</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    &lt;!<span class="token operator">-</span><span class="token operator">-</span>编译后<span class="token operator">-</span><span class="token operator">-</span>!&gt;
    <span class="token atrule">@media <span class="token punctuation">(</span>min-width<span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
      <span class="token selector">.b</span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="函数"><a href="#函数" class="header-anchor">#</a> 函数</h3> <p>less有许多的内置函数，用来转换颜色、处理字符串、算法运算符等。
由于less的内置函数有很多，这里不一一列出，后续有空会写上。
@width</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> 0.5<span class="token punctuation">;</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">percentage</span><span class="token punctuation">(</span><span class="token variable">@a</span><span class="token punctuation">)</span> <span class="token comment">//结果为50%,percentage就是进行百分率转换</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="命名空间和访问符"><a href="#命名空间和访问符" class="header-anchor">#</a> 命名空间和访问符</h3> <p>简单就是为了方便重用和分发，对变量和混合进行分组，至于访问符就是'组名.（）'</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">.a()</span><span class="token punctuation">{</span>
        <span class="token selector">.a1</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token selector">&amp;:hover</span><span class="token punctuation">{</span>    <span class="token comment">// 这里的&amp;指的是选择器的父级，又或说是当前所在选择器</span>
            <span class="token property">width</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//将a组混合到某一选择器下:</span>
    <span class="token selector">.b</span><span class="token punctuation">{</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
        <span class="token mixin-usage function">.a.a1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .b</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.b:hover</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>简单理解，这里的分组其实就像于封装成了一个函数，这样就很好理解了。</p> <h3 id="映射"><a href="#映射" class="header-anchor">#</a> 映射</h3> <p>less3.5后，我们可以将混合和规则集作为映射使用（其实就跟上面的命名空间差不多，理由组名+[]访问他的属性（内容）</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">.a()</span><span class="token punctuation">{</span>
        <span class="token property">value1</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token property">value2</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> .a[value1]<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> .a[value2]<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a</span><span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="作用域"><a href="#作用域" class="header-anchor">#</a> 作用域</h3> <p>less的作用域同css的作用域相似，先查找本地变量和混合，如果找不到则从父级作用域继承</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token variable">@a<span class="token punctuation">:</span></span> 1px<span class="token punctuation">;</span>
    <span class="token selector">.a</span><span class="token punctuation">{</span>
        <span class="token variable">@a<span class="token punctuation">:</span></span> 10px<span class="token punctuation">;</span>
        <span class="token selector">.b</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@a</span><span class="token punctuation">;</span> <span class="token comment">//从内（本地）向外查找，先查到的10px</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    .a .b</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//还有同css一样，变量和混合不用再引用前先定义。</span>
         <span class="token selector">.a</span><span class="token punctuation">{</span>
            <span class="token variable">@a<span class="token punctuation">:</span></span> 10px<span class="token punctuation">;</span>
            <span class="token selector">.b</span><span class="token punctuation">{</span>
                <span class="token property">width</span><span class="token punctuation">:</span> <span class="token variable">@a</span><span class="token punctuation">;</span> <span class="token comment">//从内（本地）向外查找，先查到的10px</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
         <span class="token variable">@a<span class="token punctuation">:</span></span> 1px<span class="token punctuation">;</span>
      <span class="token comment">//像这样编译后结果也是一样的</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="注释"><a href="#注释" class="header-anchor">#</a> 注释</h3> <p>同css是一样的，有行注释和块注释，具体如下：</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token comment">/*
        这里面
        全部给
        注释了
    */</span>
    <span class="token comment">//  这一行，</span>
        给注释了
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="导入"><a href="#导入" class="header-anchor">#</a> 导入</h3> <p>这个跟我们在html引入css或js文件是一样，用import引入某个(a.)less文件，接着你就能在这里面使用某个(a.)less文件里面的所有变量</p> <h3 id="扩展"><a href="#扩展" class="header-anchor">#</a> 扩展</h3> <p>它的作用是将选择器与它所引用的匹配选择器合并在一起。</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code>    <span class="token selector">nav ul</span> <span class="token punctuation">{</span>
      &amp;<span class="token punctuation">:</span><span class="token function">extend</span><span class="token punctuation">(</span>.inline<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.inline</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">&lt;!--编译后--!&gt;
    nav ul</span> <span class="token punctuation">{</span>
      <span class="token property">background</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">.inline,nav ul</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>这里的合并不是舍去inline，而是让nav ul也拥有inline的内容。</p> <br>
# Vue
以下内容，请先明白什么vue再来观看
## vue-router
顾名思义，这是vue一种设置路由的方式，接下来将会用一段vue代码对其详细讲解：
<div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    import Vue from 'vue'   //Es6特性，使用import导入类，这种方法一般用在npm i vue 之后
    import App from './components/app.vue'  //引入主vue组件
    import VueRouter from 'vue-router'  //引入vue-router模块
    Vue.use(VueRouter)  //搞事Vue你使用的路由模式
    import a from './components/a.vue'  //引入外部vue文件，后面会细说
    const router = new VueRouter({  //实例化模块，用常量router存储
        mode:'history'  //设置路由为我们常见的标准模式xxx.xxx.xxx/路由
        mode:'hash'     //当我们没设模式时，hash便是我们的默认模式，它以#来表示路由的开始,如：xxx.xxx.xxx/#/a
        base:'a'      //base是将某一文件夹设置为根目录或说是基路径，比方说这里访问xxx.xxx.xxx/a和xxx.xxx.xxx效果是一样
        routes:[    // 设置路由规则,因为路由通常负数所以加+，并且它是个数组
            {name:a,path:'/a',component:a},     //一条路由是一条对象，name是给这条路由取得名字，path是设置这条路由的路径（列如这里就是xxx.xxx.xxx/a）,component表示访问这里路由时使用的组件
        ]
    })
    new Vue({
        el:'#el',   //项目的隔页面下的id，这里不傲述
        router,     //这是一种简写，实际这里是router:router，表示将路径设置成了const内的内容（这里简写只适用于同名的情况）
        mounted(){  //挂载后的操作
                router.push('/a')   //可以使用这种方法，在vue项目启动后自动跳转到路由a
            },
        render:c=&gt;c(App)
    })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="安装方法"><a href="#安装方法" class="header-anchor">#</a> 安装方法</h3> <ul><li>引入CDN发布的代码    <code>&lt;script src='http://unpkg.com/vue-router'&gt;&lt;/script&gt;</code></li> <li>npm安装模块   <code>npm i vue-router --save</code></li> <li>使用vue安装   <code>vue add router</code></li> <li>引入安装在本地的vue.js    <code>&lt;script src='./js/vue.min.js'&gt;&lt;/script&gt;</code>   //vue.min.js是vue框架打包好的文件，所以里面是包含了vue-router功能的</li></ul> <h3 id="组件传递参数"><a href="#组件传递参数" class="header-anchor">#</a> 组件传递参数</h3> <h4 id="props"><a href="#props" class="header-anchor">#</a> props</h4> <p>props的作用是父组件向子组件传递参数，具体如下：</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/a/123<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>获取aValue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>  //通过点击访问连接，aValue值便是123
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    const a ={
        template: '<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{aValue}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>'
        props:['aValue']    //  用来获取数据的变量名
    }
    const router = new VueRouter({
        mode:'history',
        routes:[
            {path:'/a/:value',component:a,props:true}  //props设定为true表现开启，为false时模板是无法接受父组件传递的数据
        ]
    })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="考点"><a href="#考点" class="header-anchor">#</a> <text style="color:skyblue;">考点</text></h3> <h4 id="route和router"><a href="#route和router" class="header-anchor">#</a> route和router</h4> <ul><li>route表示当前路由，他的属性有：path（路径）、params（参数）、query（参数）、hash（获取不带有#的路径）、fullPath（获取完整的路径）、matched（数组）、name（当前路径名）、meta（路由原信息）</li> <li>router表示表现的全局路由的实例，它的实例方法有：push、go、replace</li></ul> <h4 id="params和query"><a href="#params和query" class="header-anchor">#</a> params和query</h4> <ul><li>params可以完全隐藏参数，参数显示更短，是安全性更高的一种参数方式，缺点是重新页面时参数会消失</li> <li>query不会隐藏参数，参数显示更长，安全性普通，优点啥也没刷新参数不会消失</li></ul> <h3 id="导航守卫-进阶"><a href="#导航守卫-进阶" class="header-anchor">#</a> 导航守卫（进阶）</h3> <p>简单一点说，这就是一个在路由跳转前的一个验证。</p> <h4 id="全局守卫"><a href="#全局守卫" class="header-anchor">#</a> 全局守卫</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    const router = new VueRouter({})
    router.beforeEach((to,from,next)=&gt;{     //to表示路由跳转往的路由对象，from表示导航正要离开的路由，next是一个函数，我们需要用它来resolve这个钩子

    })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>下面给出一个验证登录的简化例子</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    import Vue from 'vue'
    import App from './components/app.vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    const login = {
        template:`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> yellow</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>登录页 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>姓名：XXX<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>`
    }
    const profile = {
        template:`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> yellow</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>简介: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>姓名：XXX<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>`
    }
    const scores={
        template:`<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">background-color</span><span class="token punctuation">:</span> red</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>js: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span>500分：XXX<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>`
    }

    const router= new VueRouter({
        routes:[
            {name:'login',path:'/login',component:login},
            {name:'profile',path:'/student/:sid/profile',component:profile},
            {name:'scores',path:'/student/:sid/scores',component:scores},
        ]
    })
    router.beforeEach((to,from,next)=&gt;{
        const nextRoute=['profile','scores']
        let isLogin = false;
        if (nextRoute.indexOf(to.name)&gt;=0){
            if (!isLogin){
                console.log('没有登录')
                router.push({name:login})
            }
            if (to.name=='login'){
                if (isLogin){
                    router.push({name:'home'})
                }
            }
        }
        next();
    })
    new Vue({
        el:'#el',
        router,
        mounted(){
            router.push('/student/123/profile')
        },
        render:c=&gt;c(App)
    })
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br></div></div><h4 id="全局解析守卫"><a href="#全局解析守卫" class="header-anchor">#</a> 全局解析守卫</h4> <p><code>router.beforeResolve</code>（2.5新增，不明白）
这个跟全局守卫不同的是，它在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫才被调用</p> <h4 id="全局后置钩子"><a href="#全局后置钩子" class="header-anchor">#</a> 全局后置钩子</h4> <p><code>router.afterEach((to,from)=&gt;{})</code>
这个跟守卫不同，不会接受next函数也不改变导航本身</p> <h4 id="路由独享守卫"><a href="#路由独享守卫" class="header-anchor">#</a> 路由独享守卫</h4> <p>这个守卫是属于直接设在指定路由中，使用方法同全局前置守卫一样</p> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>    <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        routes<span class="token operator">:</span><span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                path<span class="token operator">:</span> <span class="token string">'/a'</span><span class="token punctuation">,</span>
                component<span class="token operator">:</span> a<span class="token punctuation">,</span>
                <span class="token function-variable function">beforeEnter</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span><span class="token keyword">from</span><span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>

               <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="组件内的守卫"><a href="#组件内的守卫" class="header-anchor">#</a> 组件内的守卫</h4> <p>顾名思义，是在组件内定义的路由导航卫士，分别有beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    beforeRouteEnter(to,from,next){}
    //在渲染该组件的路由被confirm前调用，不能获取this实例，因为组件实例还没被创建

    beforeRouteUpdate(to,from,next){}
    //在当前路由发生改变，但该组件被服用时使用。意思说访问两次一样的路径渲染的组件是同一个。

    beforeRouteLeave(to,from,next){}
    //当导航离开该组件的对应路由时调用
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="补充知识"><a href="#补充知识" class="header-anchor">#</a> 补充知识</h3> <ul><li>在vue初始化项目时有两个运行环境配置版本，分别是Compiler和Runtime。</li> <li>两者的区别是Compiler支持template模板内容进行编译，而Runtime版本不支持，他是在加载.vue文件时，webpack打包过程会将进行渲染，所以在runtime版本用template模板内容进行编译会报错：
<b style="color:red;">[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available</b>
解决方法：在配置文件(vue.config.js)中加入支持，写法为</li></ul> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code>    <span class="token comment">//方法一</span>
    module<span class="token punctuation">.</span>exports<span class="token operator">=</span><span class="token punctuation">{</span>
    resolve<span class="token operator">:</span><span class="token punctuation">{</span>
        alias<span class="token operator">:</span><span class="token punctuation">{</span>
            <span class="token string">'vue$'</span><span class="token operator">:</span> <span class="token string">'vue/dist/vue.esm.js'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//方法二</span>
    直接在配置文件夹中加入即可
    module<span class="token punctuation">.</span>exports<span class="token operator">=</span><span class="token punctuation">{</span>
        runtimeCompiler<span class="token operator">:</span><span class="token boolean">true</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><b style="color:blue;">ps:以上方法是针对vue3.x的，2.x的这里就暂时不写</b></p> <br>
## 单页面组件
单页面组件，这便跟上面讲到的.vue文件有关联。原本，我们会直接在文件中写上template模板进行调用，而单页面组件就是一个完全独立的文件在外（类似php的局部无刷新更新页面那样的单独文件存在）
言简意赅，单页面组件就是一个独立于主页面外的.vue文件，也就是我们常见的组件封装，使用时直接引入主页面便可（当然，还需要设置一下模板）
### <text style="color:skyblue;">考点</text>
- 使用单页面组件的优点有：完整的语法高亮、CommonJS模块化、组件化的CSS
- 使用单页面组件需要使用webpack或browserify等构建工具。可以用预处理器来构建简洁和功能丰富的组件，如pug、babel、stylus等。
- 每个.vue文件用三大部分语言快组成，`template&gt;、script&gt;、style&gt;`
- 每个.vue文件最多包含一个`script&gt;`和一个`template&gt;`。`template&gt;`的内容会被提取到vue-template-compiler为字符串，预处理为JavaScript渲染函数，最终注入`script&gt;`通过export default导出到组件中。
- 每个.vue文件都可包含多个`style&gt;`标签。`style&gt;`的属性有scoped或module会将样式封装在当前组件中，而不影响到其他组件。
- 在非单页面中，像是页面导航和分类加载数据位于不同页面，需要频繁向服务器发送请求
- 在单页面中，只需要第一次加载页面向服务器请求获取数据，后续操作又js和ajx执行，并借助ajax的json提取数据，与resultFul api相关联，从而大幅度减少服务器的压力，提示用户体验。总的来说，单页面应用就是为用户提供了更接近本地移动或桌面的应用程序体验
- 官方推荐使用vue-router实现单页面程序
- 单页面应用的优点：用户体验好，内容的改动不会重新加载整个页面。执行效率高、减少服务器压力。
- 单页面应用的缺点：不利于搜索引擎的优化，不利于浏览器书签的搜藏
<div class="language-vue line-numbers-mode"><pre class="language-vue"><code>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> //模板内的根div只能有一个，组件的内容写在这个div下面
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{</span>

        <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>上面是一个.vue组件的标准模板</p> <br>
# Vuex
vuex的讲解，果然还是推荐这个网址https://www.cnblogs.com/ichenchao/articles/11578085.html，还有https://www.cnblogs.com/pangguoming/p/11236387.html
<h1 id="数据库连接方法总结"><a href="#数据库连接方法总结" class="header-anchor">#</a> 数据库连接方法总结</h1> <h2 id="php"><a href="#php" class="header-anchor">#</a> php</h2> <ul><li>mysqli_connect()</li> <li>new mysqli()</li> <li>new PDO()
转自.....下次补上</li></ul> <div class="language-php line-numbers-mode"><pre class="language-php"><code><span class="token php language-php"><span class="token delimiter important">&lt;?php</span>
<span class="token comment">//第一种,mysqli(面向过程）</span>
<span class="token variable">$con</span> <span class="token operator">=</span> <span class="token function">mysqli_connect</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'localhost'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'root'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'yinghua'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'book'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token function">mysqli_connect_errno</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">die</span><span class="token punctuation">(</span><span class="token function">mysqli_connect_error</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">mysqli_query</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'set names utf8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">$sql</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'select * from books'</span><span class="token punctuation">;</span>
<span class="token variable">$query</span>  <span class="token operator">=</span> <span class="token function">mysqli_query</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token punctuation">,</span><span class="token variable">$sql</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">while</span><span class="token punctuation">(</span><span class="token variable">$row</span><span class="token operator">=</span><span class="token function">mysqli_fetch_assoc</span><span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">var_dump</span><span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'BookName'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">mysqli_close</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//第二种mysqli(面向对象)</span>
<span class="token comment">//连接数据库方式1</span>
<span class="token variable">$con</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mysqli</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'localhost'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'root'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'yinghua'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'book'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//连接数据库方式2</span>
<span class="token comment">//$con = new mysqli();</span>
<span class="token comment">//$con-&gt;connect('localhost','root','yinghua','book');</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token operator">-&gt;</span><span class="token property">connect_errno</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token function">printf</span><span class="token punctuation">(</span><span class="token variable">$con</span><span class="token operator">-&gt;</span><span class="token property">connect_error</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">exit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token variable">$sql</span> <span class="token operator">=</span> <span class="token string double-quoted-string">&quot;select * from books&quot;</span><span class="token punctuation">;</span>
<span class="token variable">$query</span> <span class="token operator">=</span> <span class="token variable">$con</span><span class="token operator">-&gt;</span><span class="token function">query</span><span class="token punctuation">(</span><span class="token variable">$sql</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">while</span><span class="token punctuation">(</span><span class="token variable">$row</span> <span class="token operator">=</span> <span class="token variable">$query</span><span class="token operator">-&gt;</span><span class="token function">fetch_array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">echo</span> <span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'BookName'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token variable">$query</span><span class="token operator">-&gt;</span><span class="token function">free_result</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">$con</span><span class="token operator">-&gt;</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">//第三种PDO连接数据库</span>
<span class="token keyword">echo</span> <span class="token string single-quoted-string">'&lt;br/&gt;'</span><span class="token punctuation">;</span>
<span class="token variable">$db</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">PDO</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'mysql:host=localhost;dbname=book'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'root'</span><span class="token punctuation">,</span><span class="token string single-quoted-string">'yinghua'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">try</span><span class="token punctuation">{</span>
    <span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$db</span><span class="token operator">-&gt;</span><span class="token function">query</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'select * from books'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token variable">$row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">print_r</span><span class="token punctuation">(</span><span class="token variable">$row</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'BookName'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token variable">$db</span> <span class="token operator">=</span><span class="token constant">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token class-name">PDOException</span> <span class="token variable">$e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">echo</span> <span class="token variable">$e</span><span class="token operator">-&gt;</span><span class="token function">getMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//总结，关闭mysql数据库的链接方式</span>
<span class="token comment">//mysql_close($con);</span>
<span class="token comment">//mysqli_close($con);</span>
<span class="token comment">//$con-&gt;close();</span>
<span class="token comment">//$conn =null;</span>

</span></code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h2 id="node"><a href="#node" class="header-anchor">#</a> node</h2> <ul><li>mysql.createConnection()</li> <li>mysql.createPool(),pool.getConnection()</li></ul> <div class="language-node line-numbers-mode"><pre class="language-text"><code>//第一种，普通的创建连接
const mysql = require('mysql')
const connection = mysql.createConnection({
    host:'localhost',
    port:'3306',
    database:'book',
    user:'root',
    password:'yinghua'
})
connection.connect();
connection.query('select * from books',(error,rows,field)=&gt;{
    if (error){
        throw  error;
    }
    console.log(rows)
});
connection.end();


// 第二种，连接池，需要多次执行数据库操作时更省服务器内容
const mysql =require('mysql')
const pool = mysql.createPool({
    host:'localhost',
    port:'3306',
    database:'book',
    user:'root',
    password:'yinghua',
    // connectionLimit:5    限制连接池大小
})

pool.getConnection((error,conn)=&gt;{
    if (error){
        throw error;
        // return;
        // console.log('从来连接池获取连接失败')
    }
    conn.config.queryFormat = (query,values)=&gt;{
        if(!values) return sql;
        else{
            return sql.replace(/\:(\w+)/g,(txt,key)=&gt;{
                if(values.hasOwnProperty(key)){
                    return values[key];
                }
                return txt;
            })
        }
    }
    conn.query('select * from books','',(error,results)=&gt;{
        if (error){
            throw error
        }
        console.log('执行成功')
        console.log(results);   35
        //释放连接
        conn.release();
    });
})

//总结，关闭mysql数据库的链接方式
//connection.end();
//conn.release();释放连接
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br></div></div></div></div> <div class="page-slot page-slot-bottom"><!-- 横向自适应 -->
      <ins class="adsbygoogle"
          style="display:block"
          data-ad-client="ca-pub-7828333725993554"
          data-ad-slot="6620245489"
          data-ad-format="auto"
          data-full-width-responsive="true"></ins>
      <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
      </script></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/xugaoyi/vuepress-theme-vdoing/edit/master/docs/最初/03.grow-note.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="tags"><a href="/xzzdyn/tags/?tag=%E6%97%A5%E5%B8%B8" title="标签">#日常</a></div> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/xzzdyn/pages/1f6509/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">从零开始学画画</div></a> <a href="/xzzdyn/pages/e81c23/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">精美图库</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/xzzdyn/pages/1f6509/" class="prev">从零开始学画画</a></span> <span class="next"><a href="/xzzdyn/pages/e81c23/">精美图库</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/xzzdyn/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/xzzdyn/pages/8cb3fd/"><div>错误解决</div></a> <span>04-28</span></dt></dl><dl><dd>02</dd> <dt><a href="/xzzdyn/pages/8611cb/"><div>component性能优化</div></a> <span>04-22</span></dt></dl><dl><dd>03</dd> <dt><a href="/xzzdyn/pages/958269/"><div>伪元素清除浮动原理</div></a> <span>05-13</span></dt></dl> <dl><dd></dd> <dt><a href="/xzzdyn/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:894072666@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/xugaoyi" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2019-2021
    <span>雨宿り | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a></span> <div id="jsi-flying-fish-container" class="container" style="  width: 100vw;\n  left: 0;\n  position: fixed;\n  bottom: 0;\nheight: 150px;\nmargin: 0;\npadding: 0;"></div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div> <div class="container" style="  width: 100vw;\n  left: 0;\n  position: fixed;\n  bottom: 0;\nheight: 150px;\nmargin: 0;\npadding: 0;"></div></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">跟随系统</li><li class="iconfont icon-rijianmoshi">浅色模式</li><li class="iconfont icon-yejianmoshi">深色模式</li><li class="iconfont icon-yuedu">阅读模式</li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <div class="custom-html-window custom-html-window-rb" style="display:;"><div class="custom-wrapper"><i class="close-but">×</i> <div><!-- 固定160*160px -->
      <ins class="adsbygoogle"
          style="display:inline-block;max-width:160px;max-height:160px"
          data-ad-client="ca-pub-7828333725993554"
          data-ad-slot="8377369658"></ins>
      <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      </div></div></div></div><div class="global-ui"><div></div></div></div>
    <script src="/xzzdyn/assets/js/app.4db0d55d.js" defer></script><script src="/xzzdyn/assets/js/2.dda3ed2b.js" defer></script><script src="/xzzdyn/assets/js/3.fbc0c9b3.js" defer></script><script src="/xzzdyn/assets/js/15.1cf391a4.js" defer></script>
  </body>
</html>